<!-- src/views/visual/VisualDetail.vue -->
<template>
  <main class="main-content">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <router-link to="/visual/list" class="breadcrumb-back-arrow">←</router-link>
      <span class="breadcrumb-item">视联网管理</span>
      <span class="breadcrumb-separator">/</span>
      <span class="breadcrumb-item active">视频设备</span>
    </div>

    <!-- 两栏布局容器 -->
    <div class="visual-detail-wrapper">
      <!-- 左侧：监控画面面板 -->
      <div class="main-monitor-panel card">
        <div class="monitor-screen">
          监控画面 (ID: {{ deviceId }})
        </div>
      </div>
      
      <!-- 右侧：控制与信息面板 -->
      <div class="control-info-panel">
        <div class="control-box card">
          <h3 class="control-title">设备控制</h3>
          <div class="ptz-controls">
            <button>↖</button><button>↑</button><button>↗</button>
            <button>←</button><button class="center-btn">◎</button><button>→</button>
            <button>↙</button><button>↓</button><button>↘</button>
          </div>
          <div class="zoom-controls">
            <button>放大 +</button><button>缩小 -</button>
          </div>
          <div class="preset-controls">
            <div class="preset-item"><div class="icon"></div><span>设为预置位</span></div>
            <div class="preset-item"><div class="icon"></div><span>回到预置位</span></div>
            <div class="preset-item"><div class="icon"></div><span>重新连接</span></div>
          </div>
        </div>
        <div class="info-box card">
          <h3 class="info-title">告警记录</h3>
          <div class="alarm-stats">
            <div><div class="value">1次</div><span>今日告警</span></div>
            <div><div class="value">3次</div><span>本周告警</span></div>
            <div><div class="value">13次</div><span>本月告警</span></div>
          </div>
          <ul class="alarm-record-list">
            <li class="alarm-record-item"><div class="icon">!</div><span>人员入侵</span><span class="time">2023-11-11 12:23:56</span></li>
            <li class="alarm-record-item"><div class="icon">!</div><span>设备遮挡</span><span class="time">2023-11-10 08:15:30</span></li>
          </ul>
        </div>
      </div>
    </div>
  </main>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';

// 获取路由参数中的设备ID
const route = useRoute();
const deviceId = ref('');
onMounted(() => {
  deviceId.value = route.params.id;
});
</script>

<style scoped>
@import '../../assets/css/visual.css';
</style>